<template>
	<view>
		<view class="con">
			<view class="con-bg"></view>
			<view class="con-box">
				<!-- 1，左侧头像 -->
				<view class="box-head">
					<image :src="userInfo.head"></image>
				</view>
				<!-- 2，右侧用户信息 -->
				<view class="box-detail">
					<!-- 2.1，用户昵称 -->
					<view class="user-info">
						<view class="user-nickname">
							<text>{{userInfo.nickname}}</text>
						</view>
						<view class="user-gender">
							<image :src="require('@/static/img/msg/user/gender/01.svg')"></image>
						</view>
					</view>
					<!-- 2.2，用户账号 -->
					<view class="user-username">
						<text>账号：</text>
						<text v-if="isGx" selectable="true">{{userInfo.username}}</text>
						<text v-else selectable="true">******</text>
					</view>
					<!-- 2.3，用户个性签名 -->
					<view class="user-sign">
						<text>个性签名：</text>
						<text>对方暂未设置</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-btn">
			<view v-if="isGx" class="btn" @click="gotoChat">
				<text>发消息</text>
			</view>
			<view class="btn" v-else @click="sendAddUser">
				<text>添加好友</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryFriendRemarks
	} from '@/api/http/msg/friend.js'

	import {
		getUserInfo
	} from '@/api/http/main/my/user.js'

	import websocketInit from '@/mixins/websocket_init.js'

	export default {
		data() {
			return {
				msgObject: {},
				userInfo: {},
				isGx: false,
				userId: uni.getStorageSync('userId'),
				nickname: uni.getStorageSync('nickname'),
				head: uni.getStorageSync('head'),
			}
		},
		mixins: [websocketInit],
		methods: {
			gotoChat() {
				//if()
				uni.navigateTo({
					url: '/pages/newMsg/chat-user/chat-user?msgObject=' + JSON.stringify(this.msgObject),
				})
			},
			queryFriendRemarks(fid) {
				var that = this
				getUserInfo(fid).then(ressult => {
					if (ressult.data.pubInfo.code !== 0) {
						return uni.$showMsg(ressult.data.pubInfo.message);
					}
					//console.log(ressult.data.busInfo)
					that.userInfo = ressult.data.busInfo

					queryFriendRemarks(fid, 2).then(res => {
						if (res.data.pubInfo.code !== 0) {
							//uni.$showMsg(res.data.pubInfo.message);
							if (res.data.pubInfo.message == '未建立关系') {
								this.isGx = false
								return
							}
						}
						this.userInfo.nickname = res.data.busInfo
						//console.log(res.data.busInfo)
						this.isGx = true

					})
				})


			},
			//发送好友验证消息
			sendAddUser() {		
				var reqData = {
					type: this.$chatType.ADD_FRIEND,
					msg: {
						senderId: this.userId,
						senderName: this.nickname,
						senderHead: this.head,
						receiverId: this.msgObject.id,
						message: '添加好友',
						sysType: 2,
					}
				}
				uni.myWebsocket.socketTask.send({
					data: JSON.stringify(reqData),
					async success() {
						return uni.$showMsg('发送成功');
					},
					fail(e) {
						uni.$showMsg('发送失败！');
					}
				});
			},

		},
		onLoad(e) {
			//console.log(e.msgObject)
			var userInfo = JSON.parse(e.msgObject)
			//console.log(userInfo)
			this.msgObject = userInfo
			this.queryFriendRemarks(userInfo.id)
		},
		onNavigationBarButtonTap(e) {
			//console.log(this.isGx)
			if (!this.isGx) {
				return uni.$showMsg('请先添加好友！');
			}

			//console.log(e)
			return uni.navigateTo({
				url: '/subpkg/msg/set/set-user/set-user?msgObject=' + JSON.stringify(this.msgObject)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 100%;
		position: relative;
		height: 400rpx;

		.con-bg {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 200rpx;
			background-color: rgba(10, 201, 87, 1);
			border-radius: 0 0 30rpx 30rpx;
		}

		.con-box {
			width: 90%;
			height: 300rpx;
			position: absolute;
			z-index: 9;
			background-color: #fff;
			box-shadow: 0 -1px 10px #ddd;
			margin-left: 5%;
			border-radius: 20rpx;
			margin-top: 50rpx;
			display: flex;

			.box-head {
				image {
					margin-left: 20rpx;
					margin-top: 20rpx;
					margin-right: 30rpx;
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
			}

			.box-detail {
				height: 100rpx;

				.user-info {
					display: flex;

					.user-nickname {
						// margin-top: 20rpx;
						font-size: 36rpx;
						font-weight: 550;
						line-height: 100rpx;
					}

					.user-gender {
						image {
							margin-top: 25rpx;
							margin-left: 20rpx;
							width: 50rpx;
							height: 50rpx;
						}
					}
				}



				.user-username {
					margin-top: 20rpx;
					font-size: 30rpx;
				}

				.user-sign {
					margin-top: 20rpx;
					font-size: 26rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
		}
	}

	.bottom-btn {
		width: 100%;
		height: 120rpx;

		.btn {
			width: 60%;
			height: 85rpx;
			border-radius: 60rpx;
			background-color: rgba(10, 201, 87, 1);
			margin-left: 20%;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
			font-size: 32rpx;

			&:active {
				background-color: #eee;
			}
		}
	}
</style>